<template>
  <li @mouseenter="hand(true)" @mouseleave="hand(false)" :style = "{background:bgColor}">
    <label>
      <input type="checkbox" v-model="todo.complete"/>
      <span>{{todo.title}}</span>
    </label>
    <button class="btn btn-danger" v-show="isShow" @click="deleteItem">删除</button>
  </li>
</template>

<script>
  export default {
    props:{
      todo:Object,
      index:Number,
      deleteTodos:Function
    },
    data (){
      return {
        bgColor:'white',
        isShow:false
      }
    },
    methods:{
      hand(isEnter){
        if(isEnter){
          this.bgColor = 'gray'
          this.isShow  = true
        }else{
          this.bgColor = 'white'
          this.isShow  = false
        }
      },
      deleteItem(){
        const {todo,index,deleteTodos} = this
        if(window.confirm(`确定删除 ${todo.title} 的数据吗?`)){
          deleteTodos(index)
        }
      }
    }
  }
</script>

<style >

</style>
